  // 饼状图
  import * as echarts from 'echarts'
  import router from '@/router'
  const setOption:any = {
    Pie(attr:any, data:any, pramas1:any, pramas2:any) {
      let path = router.currentRoute.value.path
      let series = [{
        name: '统计',
        type: 'pie',
        radius: path == '/monitor'? ['30%', '42%'] : ['42%', '60%'],
        center : [ '30%', '50%' ],
        avoidLabelOverlap: false,
        labelLine: {show: false},
        label: { position: 'center', show: false,},        
        emphasis: {label: { show: false, fontSize: newSize(20), fontWeight: 'bold'}},
        itemStyle: {color: (list:any, index:any) => { return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          {offset: 0, color: list.dataIndex < 9? colorList[list.dataIndex]['colorStart'] : colorList[9]['colorStart']}, 
          {offset: 1, color: list.dataIndex < 9? colorList[list.dataIndex]['colorEnd'] : colorList[9]['colorEnd']}])}},
        data: data
      }]
      const option = {
        animation: false,
        title: {
          show: true,
          text: series[0].data.reduce(function (a:any, b:any) { return a + Math.round(b.value*100)/100 }, 0),
          subtext: '总数',
          itemGap: 4,
          left: path == '/monitor'? '28.5%' : '28.5%',
          top: path == '/monitor'? '42%' : '37%',
          textStyle: {
            color: '#1BFFDF',
            fontSize: newSize(40),
            fontWeight: 'bold'
          },
          subtextStyle: {
            color: '#FFFFFF',
            fontSize: newSize(12),
          },
          textAlign:'center'
        },
        tooltip: {
          backgroundColor:'rgba(0,0,0,0.5)',
          textStyle : {
            color: '#FFFFFF',
          },
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'//a 系列名称，b 数据项名称，c 数值，d 百分比
        },
        legend: {
          left: '65%',
          top: 'middle',
          // top: 'middle',
          orient: 'vertical',
          type: "scroll",
          height: '80%',
          pageButtonItemGap: newSize(10),
          pageButtonGap: newSize(10),
          pageIconColor: '#44e6fd',
          pageIconInactiveColor: '#fbffff',
          pageTextStyle: {
            color: '#35ffff'
          },
          // 修改小图标的大小
          itemWidth: newSize(12),
          itemHeight: newSize(12),
          itemGap: newSize(12),
          icon: 'circle',
          show: true,
          data: data,
          textStyle: { 
            color: '#fff',
            fontSize: newSize(12),
            rich:{
              a:{ width: newSize(80), fontSize: newSize(12)},
              b:{ color: '#ffffff ',  fontSize: newSize(12)}
            }
          },
          formatter: function (name: any) {
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            return `{a|${name}}{b|${tarValue}}`
          }
        },
        series: series
      };
      return option
    },
		
    Pie1(attr:any, data:any, pramas1:any, pramas2:any) {
      let series = [{
        name: '统计',
        type: 'pie',
        radius: ['25%', '36%'],
        center : [ '50%', '25%' ],
        avoidLabelOverlap: false,
        labelLine: {show: false},
        label: { position: 'center', show: false,},        
        emphasis: {label: { show: false, fontSize: newSize(20), fontWeight: 'bold'}},
        itemStyle: {color: (list:any, index:any) => { return new echarts.graphic.LinearGradient(1, 0, 0, 0, [
          {offset: 0, color: list.dataIndex < 9? colorList[list.dataIndex]['colorStart'] : colorList[9]['colorStart']}, 
          {offset: 1, color: list.dataIndex < 9? colorList[list.dataIndex]['colorEnd'] : colorList[9]['colorEnd']}])}},
        data: data
      }]
      const option = {
        animation: false,
        title: {
          show: true,
          text: series[0].data.reduce(function (a:any, b:any) { return a + Math.round(b.value*100)/100 }, 0),
          subtext: '总数',
          itemGap: 4,
          left: '49%',
          top: '19%',
          textStyle: {
            color: '#1BFFDF',
            fontSize: newSize(40),
            fontWeight: 'bold'
          },
          subtextStyle: {
            color: '#FFFFFF',
            fontSize: newSize(12),
          },
          textAlign:'center'
        },
        tooltip: {
          backgroundColor:'rgba(0,0,0,0.5)',
          textStyle : {
            color: '#FFFFFF',
          },
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'//a 系列名称，b 数据项名称，c 数值，d 百分比
        },
        legend: {
          width: '80%',
          x: 'center',
          y: 'center',
          top: '48%',
          itemGap: newSize(20),
          itemWidth: newSize(13),
          itemHeight: newSize(13),
          data: data,
          textStyle: { 
            color: '#fff',
            fontSize: newSize(13),
            rich:{
              a:{
                width: newSize(80),
                fontSize: newSize(13),
              },
              b:{
                color: '#ffffff',
                width: newSize(100),
                fontSize: newSize(13),
              }
            }
          },
          formatter: function (name: any) {
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name == name) {
                tarValue = data[i].value
              }
            }
            return `{a|${name}}{b|${tarValue}}`
          }
        },
        series: series
      };
      return option
    },

    Pie2(attr:any, data:any, pramas1:any, pramas2:any) {
      let series = [{
        name: '统计',
        type: 'pie',
        radius: ['45%', '62%'],
        center : [ '30%', '48%'],
        avoidLabelOverlap: false,
        labelLine: {show: false},
        label: { position: 'center', show: false},        
        emphasis: {label: { show: false, fontSize: newSize(20), fontWeight: 'bold'}},
        itemStyle: {color: (list:any) => { return new echarts.graphic.LinearGradient(1, 0, 0, 0, [{offset: 0, color: colorList[list.dataIndex]['colorStart']}, {offset: 1, color: colorList[list.dataIndex]['colorEnd']}])}},
        data: data,
      }]
      const option = {
        animation: false,
        title: {
          show: true,
          text: series[0].data.reduce(function (a:any, b:any) { return a + Math.round(b.value*100)/100 }, 0),
          subtext: '总数',
          itemGap: 4,
          left: '29%',
          top: '37%',
          textStyle: {
            color: '#1BFFDF',
            fontSize: newSize(38),
            fontWeight: 'bold'
          },
          subtextStyle: {
            color: '#FFFFFF',
            fontSize: newSize(12),
          },
          textAlign:'center'
        },
        tooltip: {
          backgroundColor:'rgba(0,0,0,0.5)',
          textStyle : {
            color: '#FFFFFF',
          },
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'//a 系列名称，b 数据项名称，c 数值，d 百分比
        },
				legend: {
				  orient: 'vertical',
				  align: 'left',
				  right: '16%',
				  y: 'center',
				  icon: "circle", 
				  itemWidth: newSize(16),
				  itemHeight: newSize(16),
				  itemGap: newSize(16),
				  textStyle: {
				    color: '#fff',
				    fontSize: newSize(13),
				    rich:{
				      a:{
								color: '#1BFFDF',
				        padding: newSize(10),
				        fontSize: newSize(13),
								fontWeight: 'bold'
				      },
				      b:{
				        color: '#ffffff',
				        fontSize: newSize(13),
				      }
				    }
				  },
				  formatter: function (name:any) {
				    let total = 0
				    let tarValue
				    for (let i = 0; i < data.length; i++) {
				      total += data[i].value
				      if (data[i].name == name) {
				        tarValue = data[i].value
				      }
				    }
						return `{b|${name}}{a|${tarValue}}`
				    // return `${name}：` + ["{a|" + tarValue + "}"]
				  }
				},
        series: series
      };
      return option
    },

  }

  // 字体自适应
  const newSize = (res:any) => {
    let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = clientWidth / 1920; //设计稿尺寸
    return res * fontSize;  //转换为 rem的布局返回出去
  }

  // 颜色列表
  const colorList = [
    { colorStart:'#0033FF', colorEnd:'#00B7FF' },
    { colorStart:'#9B42FF', colorEnd:'#FF59FC' },
    { colorStart:'#E75F5F', colorEnd:'#FFCD45' },
    { colorStart:'#f7290a', colorEnd:'#f98371' },
    { colorStart:'#CE2B8D', colorEnd:'#FF9595' },
    { colorStart:'#488BFF', colorEnd:'#9abffd' },
    { colorStart:'#26CEBA', colorEnd:'#8efaed' },
    { colorStart:'#FFC069', colorEnd:'#fadfba' },
    { colorStart:'#FD6865', colorEnd:'#f8b2b1' },
    { colorStart:'#becce9', colorEnd:'#82a0df' }
  ]
export default setOption

